<template>
	<wsPage title="敏感词列表">
		<div slot="page_operate">
			<Button  @click="refreshPage"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="敏感词">
			            <Input v-model="queryForm.name" placeholder="请输入"></Input>
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button  @click="showAddModal">新增敏感词</Button>
				<!-- <Button  @click="exportExcel">导出</Button> -->
				<Button  :disabled="!isTableSelected" @click="batchDelConfirm">批量删除</Button>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data" @on-selection-change="tableSelected"></Table>
			</div>
		</wsSmPanel>
		
		<!--新增账号弹框-->
		<wsModal v-model="sensitiveWordModal.show" ok-text="保存" title="创建敏感词" @on-ok="saveModal" @on-cancel="cancelModal">
		    <Form ref="sensitiveWordForm" :model="sensitiveWordModal.form" :rules="sensitiveWordModal.validate" :label-width="100">
		        <FormItem label="敏感词" prop="name">
		            <Input v-model="sensitiveWordModal.form.name" autofocus></Input>
		        </FormItem>
		    </Form>			
		</wsModal>	
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				queryForm: {
					name: '',
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },{
						title: '敏感词',
                        key: 'name',
                        width: 500,
                        align: 'center'
					},{
						title: '创建时间',
                        key: 'createDate',
                        align: 'center'
					},{
						title: '操作',
						width: 180,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											let rowId = params.row.id;
                                    		this.showEditModal(rowId);
										}
									}
								}, '编辑'),
								h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											let rowId = params.row.id;
                                    		this.delConfirm(rowId);
										}
									}
								}, '删除')
								])
						}
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
					loading: true
				},
				//新增弹框
				sensitiveWordModal: {
					show: false,
					form: {
						id:'',
						name: ''						
					},
					validate: {
						name: [
	                        { required: true, message: '敏感词不能为空', trigger: 'blur' }
	                    ],
					}
				}
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
		      return !Util.vad.isBlank(this.sensitiveWordModal.form.id);
		    }	
		},
		mounted() {
			this.init();
		},
		methods: {
			refreshPage(){
				this.queryForm.name = '';
				this.table.page.pageNum = 1;
				this.query();
			},
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ops/sensitiveWords?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 打开新增模态框
			 */
			showAddModal(){
				this.sensitiveWordModal.form.id = '';
				this.sensitiveWordModal.form.name = '';
				this.sensitiveWordModal.show = true;
			},
			/**
			 * 打开编辑模态框
			 */
			showEditModal(rowId){
				this.queryById(rowId);
			},
			/**
			 * 根据id查询
			 */
			queryById(rowId){
				const _this = this;
				this.axios.get('/ws/ops/sensitiveWords/' + rowId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.sensitiveWordModal.form.id = res.data.id;
						_this.sensitiveWordModal.form.name = res.data.name;
						_this.sensitiveWordModal.show = true;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},	
			/**
			 * 编辑
			 */
			editSensitiveWord(){
				const _this = this;
				let postData_ = this.sensitiveWordModal.form;
				this.axios.put('/ws/ops/sensitiveWords', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改敏感词成功!');
                        _this.sensitiveWordModal.show = false;
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改失败:' + message_);
					}
				});
			},
			/**
			 * 新增
			 */
			saveSensitiveWord(){
				const _this = this;
				let postData_ = this.sensitiveWordModal.form;
				this.axios.post('/ws/ops/sensitiveWord', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增敏感词成功!');
                        _this.sensitiveWordModal.show = false;
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增失败:' + message_);
					}
				});
			},
			/**
			 * 保存操作
			 */
			 submitModal(){
			 	if(this.isEdit) {
					this.editSensitiveWord();
				} else {
					this.saveSensitiveWord();
				}
			 },
			/**
			 * 新增弹框确认操作
			 */
			saveModal() {
				this.$refs['sensitiveWordForm'].validate((valid) => {
					if (valid) {
						this.submitModal();
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                    
               });
			},
			
			/**
			 * 新增的弹框取消操作
			 */
			cancelModal() {
				this.$refs['sensitiveWordForm'].resetFields();
				this.sensitiveWordModal.show = false;
			},
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},
			/**
			 * 批量删除提示
			 */
			batchDelConfirm() {
				const _this = this;
				this.$confirm({
        			content: '你确认删除选中数据吗?',
        			onOk: function() {
        				_this.batchDelRow();
        			}
        		});
			},
			/**
			 * 批量删除
			 */
			batchDelRow(){
				let ids = [];
				this.table.selection.forEach((item) => {
			      ids.push(item.id);
			    });
				if(ids.length < 1){
					this.$Message.warning('请选择要删除的敏感词');
					return;
				}
				const _this = this;
				this.axios.post('/ws/ops/sensitiveWords/batchDel' , ids).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('删除敏感词成功');
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除敏感词失败:' + message_);
					}	
			    });	
			},
			/**
			 * 删除单个敏感词提示
			 */
			delConfirm(rowId) {
        		const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录吗?',
        			onOk: function() {
        				_this.delRow(rowId);
        			}
        		});		
			},
			/**
			 * 删除单个敏感词
			 */
			delRow(rowId){
				const _this = this;
				this.axios.delete('/ws/ops/sensitiveWords/' + rowId ).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('删除敏感词成功');
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除敏感词失败:' + message_);
					}	
			    });				
			},
			//导出excel
			exportExcel(){
				// /ws/ops/sensitiveWords
				window.location.href='/ws/api/ops/sensitiveWords/exportExcel';
			}


		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>